// 商品三级菜单详情展示
import { ref, type Ref } from 'vue'

export function useHoverDelay() {
  const activeIndex: Ref<number | null> = ref(null)
  const isInDetail = ref(false)
  let timer: number | null = null

  const handleMenuEnter = (index: number) => {
    // 清除之前的计时器
    if (timer) clearTimeout(timer)
    activeIndex.value = index
  }

  const handleMenuLeave = () => {
    // 延迟 100ms 检查是否进入了详情面板
    timer = setTimeout(() => {
      if (!isInDetail.value) {
        activeIndex.value = null
      }
    }, 100)
  }

  const handleDetailEnter = () => {
    isInDetail.value = true
    // 如果鼠标从菜单直接进入详情面板，取消隐藏计时
    if (timer) clearTimeout(timer)
  }

  const handleDetailLeave = () => {
    isInDetail.value = false
    activeIndex.value = null
  }

  return {
    activeIndex,
    isInDetail,
    handleMenuEnter,
    handleMenuLeave,
    handleDetailEnter,
    handleDetailLeave,
  }
}
